import React, { Component } from 'react';
import { Relax, msg } from 'iflux2';
import classNames from 'classnames';

import { Row, Col, Select, Input, Form, Button } from 'antd';
const Option = Select.Option;
import AdvancedSearch from './advanced-search';

import { SimpleOptions } from '../constant/options';
import noop from 'util/noop';
@Relax
class SearchAlias extends Component {
    static defaultProps = {
        setSearchParam:noop,
        resetPagination: noop,
        queryOrderList: noop
    }
    render(){
        return <Search {...this.props} />
    }
}
class Search extends Component {

    constructor(props) {
        super(props);

        this.state = {
            expand: false
        }
    }

    componentDidMount() {
        //页面变化重置参数
        msg.on('page_changed',() => {
            this.props.form.resetFields();
        })
    }
    
    render() {
        const { form: { getFieldDecorator, getFieldValue } } = this.props;
        const { expand } = this.state;

        const btnCls = classNames('ant-search-btn', 'simple-search-btn', {
            'ant-search-btn-noempty': !!getFieldValue('simpleValue')
        });

        const searchFormCls = classNames('search-form', {
            'show-advance': expand,
        });

        const simpleTypeField = getFieldDecorator('simpleType', {
            initialValue: 'tid'
        })(
            <Select className="percent100"
                size="large">
                {
                    SimpleOptions.map(option => <Option {...option}>{option.text}</Option>)
                }
            </Select>
            );

        const simpleValueField = getFieldDecorator('simpleValue')(
            <Input size="large"
                onPressEnter={() => this.query()} />
        );

        return (
            <Form className={searchFormCls}>
                <div className="simple-search">
                    <div className="ant-search-input-wrapper">
                        <Row className="search-select">
                            <Col span="6" className="search-item">
                                <Row className="select-and-input">
                                    <Col span="8">{simpleTypeField}</Col>
                                    <Col span="16">{simpleValueField}</Col>
                                    <Button icon="search"
                                        className={btnCls}
                                        onClick={() => this.query()} />
                                </Row>
                            </Col>
                        </Row>
                    </div>
                    <a className="search-advance-switch" href="javascript:;" onClick={() => this.changeExpand()}>高级搜索</a>
                </div>
                <AdvancedSearch form={this.props.form}
                    changeExpand={this.changeExpand}
                    onSearch={this.query} />
            </Form>
        )
    }


    /**
     * 点击回车键查询订单列表
     */
    query = () => {
        let { range_picker, simpleType, simpleValue, ...rest } = this.props.form.getFieldsValue();
        let { expand } = this.state;

        let params = {};
        if (expand) {
            //日期选择：第一次选择日期后，再删除日期参数，range_picker会变为空数组
            params = Object.assign(params, rest, {
                startTime: (range_picker && range_picker.length) ? range_picker[0].startOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
                endTime: (range_picker && range_picker.length) ? range_picker[1].endOf('day').format('YYYY-MM-DD HH:mm:ss') : '',
            })
        } else {
            params ={
                [simpleType]: simpleValue
            }
        }
        this.props.setSearchParam(params);
        //点击搜索，1：重置分页信息 2：搜索订单列表
        this.props.resetPagination();
        this.props.queryOrderList();
    }


    changeExpand = () => {
        this.setState({
            expand: !this.state.expand
        })
    }
}
Search = Form.create()(Search);
export default  SearchAlias;